<template>
    <div class="box">
        <van-nav-bar title="购物车" />
        <div v-if="list.length > 0">
            <van-swipe-cell v-for="(v, i) in list" :key="i">
                <van-card :price="v.goods_price" :title="v.goods_name">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="v.checked"></van-checkbox>
                            <img :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                alt="" style="width: 6rem;height: 6rem;">
                        </div>

                    </template>
                    <template #footer>
                        <van-stepper v-model="v.num" />
                    </template>

                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" @click="slice(i)" class="delete-button" />
                </template>

            </van-swipe-cell>
            <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checkedAll" @click="checked">全选</van-checkbox>
            </van-submit-bar>
        </div>
        <div v-else>
            <van-empty description="暂无数据" />
        </div>
    </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
import { ref , computed } from 'vue';
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()

let list = ref(store.names)

// const checkedAll = () => {
//     list.value.filter(v => v.checked =  true)
// }



// const price = computed(()=>{
// let sum = 0
//     if(v.checked == true)
//     {   
//         sum += num * price 
//     }
//     return sum / 100
// })
    

const slice = (i) => {
    list.value.splice(i, 1)
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;

    .van-submit-bar {
        bottom: 5.5rem;
    }

     .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
}
</style>